jQuery UI হল একটি শক্তিশালী প্লাগইন যা বিভিন্ন ধরণের UI উপাদান তৈরি করতে সহায়তা করে। এর মধ্যে টুলটিপ (Tooltip) এবং ডায়ালগ (Dialog) হলো দুটি বহুল ব্যবহৃত ফিচার। এগুলো ব্যবহারকারীর ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকর করে তোলে।
jQuery UI টুলটিপ
টুলটিপ হল একটি ছোট পপ-আপ বাক্স যা ব্যবহারকারীর মাউস একটি এলিমেন্টের উপর গেলে প্রদর্শিত হয়। এটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে।
মৌলিক টুলটিপ উদাহরণ
HTML:
<p title="এটি একটি টুলটিপ উদাহরণ।">মাউস এখানে নিয়ে যান</p>
jQuery:
$(document).ready(function() {
$(document).tooltip();
});
কাস্টমাইজড টুলটিপ
টুলটিপ কাস্টমাইজ করতে jQuery UI টুলটিপের বিভিন্ন অপশন ব্যবহার করা যায়।
HTML:
<p title="টুলটিপ টেক্সট">এই বাক্যের উপর মাউস রাখুন।</p>
jQuery:
$(document).ready(function() {
$(document).tooltip({
show: { effect: "slideDown", duration: 200 },
hide: { effect: "fadeOut", duration: 200 },
position: { my: "left+15 center", at: "right center" }
});
});
CSS:
.ui-tooltip {
background: #333;
color: #fff;
font-size: 14px;
padding: 10px;
border-radius: 5px;
}
jQuery UI ডায়ালগ
ডায়ালগ একটি মডাল পপ-আপ উইন্ডো যা গুরুত্বপূর্ণ মেসেজ, ফর্ম, বা অপশন দেখানোর জন্য ব্যবহার করা হয়। এটি ব্যবহারকারীকে একটি নির্দিষ্ট কাজ সম্পন্ন করার জন্য মনোযোগ কেন্দ্রীভূত করতে সহায়তা করে।
মৌলিক ডায়ালগ উদাহরণ
HTML:
<div id="myDialog" title="ডায়ালগ উইন্ডো">
<p>এটি একটি সাধারণ ডায়ালগ উদাহরণ।</p>
</div>
<button id="openDialog">ডায়ালগ খুলুন</button>
jQuery:
$(document).ready(function() {
$("#myDialog").dialog({
autoOpen: false, // ডায়ালগ স্বয়ংক্রিয়ভাবে খুলবে না
modal: true // ব্যাকগ্রাউন্ড লক থাকবে
});
$("#openDialog").click(function() {
$("#myDialog").dialog("open");
});
});
কাস্টমাইজড ডায়ালগ
ডায়ালগ আরও কার্যকর করতে কাস্টম অপশন যোগ করা যায়।
HTML:
<div id="customDialog" title="কাস্টম ডায়ালগ">
<p>আপনি কি নিশ্চিত?</p>
</div>
<button id="openCustomDialog">কাস্টম ডায়ালগ খুলুন</button>
jQuery:
$(document).ready(function() {
$("#customDialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
alert("আপনি নিশ্চিত করেছেন!");
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$("#openCustomDialog").click(function() {
$("#customDialog").dialog("open");
});
});
- টুলটিপ: সহজ তথ্য প্রদর্শনের জন্য কার্যকর, যা মাউস-ওভার ইভেন্টে ট্রিগার হয়।
- ডায়ালগ: গুরুত্বপূর্ণ মেসেজ বা কাজের জন্য ব্যবহার করা হয় এবং এটি ব্যবহারকারীর মনোযোগ কেন্দ্রীভূত করে।
jQuery UI টুলটিপ এবং ডায়ালগ ব্যবহার করে ওয়েব পেজে কার্যকর ইন্টারফেস তৈরি করা সহজ এবং দ্রুত। এগুলো কাস্টমাইজেশন অপশন প্রদান করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
